<template>
	<view>
		<view class="top-image" @tap.stop="saveShowStatus(true)">
			<image class="bg-image" :src="showPath" mode="scaleToFill" />
			<view class="change-bg" v-if="clickShowMore == true">更换背景</view>
		</view>
		<view class="sel-bg" @touchmove.stop.prevent="moveHandle"  v-if="show_change_bg == true">
			<view class="mask-show" @tap.stop="saveShowStatus(false)"></view>
			<view class="bg-list">
				<view class="show-close"><text class="iconfont icon-guanbi iconfont-close" @tap.stop="saveShowStatus(false)"></text></view>
				<view class="scroll">
					
					<scroll-view class="scroll-view" scroll-x="true">
						<view v-for="(item,index) in srcList" :key="index" class="item-parent" @tap="selBg(index)">
							<image class="image" :src="item.qnPath"></image>
						</view>
						<view class="item-parent item-parent-up" @tap="uploadBg">
							<view class="upload-img">
								<view class="icon"><text class="iconfont icon-jiahao"></text></view>
								<view class="desc">
									<view class="width-tip">建议宽高</view>
									<view>750*460</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		<w-compress ref='wCompress' />	
		</view>
		<!-- <uploadCanvas></uploadCanvas> -->
	</view>
</template>

<script>
	import Upload from "@/utils/fileupload/upload.js";
	import WCompress from '@/components/w-compress/w-compress.vue'
	export default {
		name:'add-sel-bg',
		components: {
		        WCompress
		},
		data() {
			return {
				show_change_bg:false,
				srcIndex:0,
				srcList:[],
				showPath:'',
				bgQnLog:{},
			}
		},
		props:{
			from:{
				type:String,
				default:''
			},
			initBg:{
				type:Boolean,
				default:false,//是否有初始化背景图，默认没有
			},
			clickShowMore:{
				type:Boolean,
				default:true,//点击显示更多
			}
		},
		methods: {
			getShowPath(){
				return this.showPath;
			},
			initBgFunc(info){
				if(info.qnPath)
				{
					this.showPath = info.qnPath;
					this.srcIndex = -1;
					if(info.path)
					{
						var md5Name = this.$api.getMd5Name(this.showPath,false);
						this.bgQnLog[md5Name] = info.path;
					}
					this.srcList = [{
						path:info.path,
						qnPath:info.qnPath
					}];
				}
			},
			async getBgUrl()
			{
				var index = this.srcIndex;
				if(index == -1)
				{
					//上传图片
					var md5Name = this.$api.getMd5Name(this.showPath,false);
					if(!this.bgQnLog[md5Name])
					{
						var fileRes = await Upload.uploadImageToQiniuH5([
							{
								path:this.showPath
							}
						])
						uni.hideLoading()
						if(fileRes.list && fileRes.list.length > 0)
						{
							this.bgQnLog[md5Name] = fileRes.list[0];
						}else{
							this.$api.msg('背景图上传失败');
							return '';
						}
					}
					return {
						qnPath:this.bgQnLog[md5Name],
						path:this.showPath,
						type:2
					};
				}else{
					var info = this.srcList[index]?this.srcList[index]:{};
					return {
						path:info.qnPath?info.qnPath:'',
						qnPath:info.path?info.path:'',
						type:1
					}
				}
			},
			//用户自行上传图片
			async uploadBg(){
				var img = await Upload.chooseImg();
				if(img.length > 0)
				{
					this.imgCompress(img[0].path).then(res=>{
						if(res)
						{
							this.showPath = res;
							this.srcIndex = -1;
							this.saveShowStatus(false);
						}
					}).catch(err=>{
						console.log('error',err)
					});
				}
			},
			async imgCompress(tempFilePaths, type) { //type 0 为图片 1为视频
				this.$api.loadingMsg('正在压缩图片');
				var that = this;
				let compressImgs = [];
				let results = [];
				return new Promise((resolve, reject) => {
					// #ifndef H5
					that.$refs.wCompress.start(tempFilePaths,{
					}).then(res=>{
						uni.hideLoading();
						resolve(res);
					}).catch(err=>{
						uni.hideLoading();
						that.$api.msg('压缩图片失败');
						/* console.log('compressImgs error',err)
						reject(err); */
					})
					// #endif
				})
			},
			selBg(index){
				this.srcIndex = index;
				this.showPath = this.srcList[index] && this.srcList[index].qnPath?this.srcList[index].qnPath:'';
				this.saveShowStatus(false);
			},
			saveShowStatus(status){
				if(this.clickShowMore == false)
				{
					return ;
				}
				this.show_change_bg = status;
			},
			getBgImage(){
				var that = this;
				this.$http.post('Config/getBgImageList',{
					from:that.from
				}).then(res=>{
					that.srcList = that.srcList.concat(res.data.list);
					if(that.srcList.length > 0)
					{
						var newSrcList = [];
						var newSrcListObj = {};
						that.srcList.forEach(item=>{
							var md5 = that.$api.getMd5Name(item.path,false);
							if(!newSrcListObj[md5])
							{
								newSrcList.push(item);
								newSrcListObj[md5] = true;
							}
						})
						that.srcList = newSrcList;
						if((that.initBg == false || !that.showPath) && that.srcIndex > -1)
						{
							that.showPath = that.srcList[that.srcIndex] && that.srcList[that.srcIndex].qnPath?that.srcList[that.srcIndex].qnPath:'';
						}
						
					}
				})
			}
		},
		mounted() {
			if(this.clickShowMore == true)
			{
				this.getBgImage();
			}
			
		}
		
	}
</script>

<style lang="scss">
	.sel-bg{
		position: relative;
		.bg-list{
			position: fixed;
			width: 100%;
			height: 320rpx;
			bottom: 0;
			background: #ffffff;
			z-index: 999;
			border-radius: 20rpx 20rpx 0 0;
			.scroll{
				.scroll-view{
					white-space: nowrap;
					//height: 260rpx;
					.item-parent{
						width: 250rpx;
						display: inline-block;
						padding-left: 10rpx;
						
						height: 153rpx;
						position: relative;
						.image{
							width: 98%;
							height: 153rpx;
							margin: 0 1%;
							border-radius: 10rpx;
						}
						
					}
					.item-parent-up{
						margin-right: 50rpx;
						.upload-img{
							background-color: #eeeeee;
							position: absolute;
							width: 250rpx;
							height: 154rpx;
							border-radius: 10rpx;
							top: 0;
							left: 12rpx;
							.icon{
								text-align: center;
								    height: 76rpx;
								    line-height: 82rpx;
								.iconfont{
									font-size: 60rpx;
								}
							}
							.desc{
								font-size: 24rpx;
								    color: #999;
								    text-align: center;
								.width-tip{
									height: 40rpx;
									line-height: 40rpx;
								}
							}
						}
					}
				}
				
			}
			.show-close{
				height: 80rpx;
				.iconfont{
					float: right;
					font-size: 60rpx;
					margin: 10rpx 20rpx;
					color: #999999;
				}
			}
		}
	}
	.top-image{
		height: 460rpx;
		width: 100%;
		position: relative;
		.change-bg{
			position: absolute;
			right: 9px;
			top: 280rpx;
			background: #5d5555;
			opacity: 0.8;
			padding: 0rpx 26rpx;
			height: 40rpx;
			line-height: 40rpx;
			font-size: 24rpx;
			border-radius: 20rpx;
			color: #ffffff;
		}
		.bg-image{
			width: 100%;
			height: 460rpx;
		}
	}
</style>
